<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加演示</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <!-- <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"> -->
    <style>
        .layui-layout-admin .layui-logo {
            left: 2rem;
            text-align: left;
            color: #fff;
        }

        #card-show a:hover {
            background-color: yellow;
            bottom: 2rem;
        }
    </style>
</head>

<body style="background-color: #F3F5F6;">
    <div class="layui-layout layui-layout-admin">
        <!-- 顶部导航栏 -->
        <div class="layui-header header">
            <div class="layui-logo">问卷调查</div>
            <ul class="layui-nav " lay-filter="" style="margin-left: 6rem;">
                <li class="layui-nav-item layui-this"><a href="/">我的项目</a></li>
                <li class="layui-nav-item"><a href="/show">数据</a></li>
                
            </ul>
            <!-- 顶部状态栏右侧 -->
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href=""><img src="./imgs/boy-avatar.png" class="layui-nav-img">{{nickname}}</a>
                    <!-- <a href="">{{nickname}}</a> -->
                    <dl class="layui-nav-child">
                        <!-- <dd><a href="javascript:;">修改信息</a></dd>
                        <dd><a href="javascript:;">安全管理</a></dd> -->
                        <dd><a href="javascript:;" onclick="logout()">退了</a></dd>
                    </dl>
                </li>
            </ul>
        </div>

        <!--右侧主体内容区-->
        <div class="layui-body" style="left: 0rem;margin-top: 1rem;">
            <!-- <div class="layui-container">  -->
            <div class="layui-row">
                <div class="layui-col-md1 layui-col-xs1 layui-col-sm1">
                    &nbsp;
                </div>
                <div class="layui-col-md10 layui-col-xs10 layui-col-sm10">
                    <form class="layui-form" action="" id="content">
                        <div id="problem">
                            {% for count in counts %}
                            {% if (count.countType==1)%}
                            <div class="layui-form-item">
                                <label class="layui-form-label">填分题：</label>
                                <div class="layui-input-block" id="form{count.id}">
                                    <input type="text" name="adq{{count.id}}" required lay-verify="required"
                                        placeholder="请输入问题" autocomplete="off" value="{{count.countContent}}"
                                        class="layui-input">
                                    {% if(count.optTypes==1) %}
                                    <input type="text" name="ops{{count.optId}}" required lay-verify="required"
                                        placeholder="分值" autocomplete="off" value="{{count.optContents}}"
                                        class="layui-input">
                                    {% endif %}
                                </div>
                                <label class="layui-form-label"></label>
                                <!-- <button type="button" id="ado{{count.id}}"
                                    class="layui-btn layui-btn-primary layui-border-green "
                                    onclick="addOptions('{{count.id}}','{{count.countType}}')"
                                    style="margin-top:0.5rem"><img src="../imgs/添加.png"
                                        style="width: 1rem;height: 1rem;margin-bottom: 0.1rem;">
                                    设置分值</button> -->
                            </div>
                            {% elseif(count.countType==2) %}
                            <div class="layui-form-item">
                                <label class="layui-form-label">选分题：</label>
                                <div class="layui-input-block" id="form{{count.id}}">
                                    <input type="text" name="adq{{count.id}}" required lay-verify="required"
                                        placeholder="请输入问题" autocomplete="off" value="{{count.countContent}}"
                                        class="layui-input">
                                    <select name="ops{{count.id}}" lay-verify="required" id="sco{{count.id}}">
                                        {% if(count.optTypes==2) %}
                                        {% for i in range(0,count.optContents) %}
                                        <option value="{{i}}">{{i}}分</option>
                                        {% endfor %}
                                        <option value="{{count.optContents}}">{{count.optContents}}分</option>
                                        {% endif %}
                                    </select>
                                </div>
                                <label class="layui-form-label"></label>
                            </div>
                            {% endif %}
                            {% endfor %}

                        </div>

                        {% if(counts[0].id===undefined) %}
                        <div id="submitForm" class="layui-hide">
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </div>
                        {% else %}
                        <div id="submitForm">
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </div>
                        {% endif %}
                    </form>

                    <!-- 添加的问题类型 -->
                    <div id="add" class="layui-col-md12 layui-col-xs12 layui-col-sm12">
                        <p class="layui-col-md12 layui-col-xs12 layui-col-sm12">请选择你要添加的题型：</p>
                        <br>
                        <button type="button"
                            class="layui-btn layui-btn-primary layui-border-green layui-col-md2 layui-col-xs6 layui-col-sm3"
                            onclick="addWrite()"><img src="../imgs/填空题.png"
                                style="width: 1rem;height: 1rem;margin-bottom: 0.1rem;"> 填分题</button>
                        <button type="button"
                            class="layui-btn layui-btn-primary layui-border-green layui-col-md2 layui-col-xs6 layui-col-sm3"
                            onclick="addScore()"><img src="../imgs/打分题.png"
                                style="width: 1rem;height: 1rem;margin-bottom: 0.1rem;"> 选分题</button>
                    </div>
                    <!-- 底部留空 -->
                    <div style="margin-bottom: 3rem;">
                        <p>&nbsp;</p>
                    </div>



                </div>
                <div class="layui-col-md1 layui-col-xs1 layui-col-sm1">
                    &nbsp;
                </div>
            </div>
            <!-- </div> -->



        </div>


        <div class="layui-footer" style="left: 0rem;">
            <!-- 底部固定区域 -->
            © layui.com - 底部固定区域
        </div>
    </div>

    <script src="/static/js/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="/static/layui/layui.js"></script>
    <script>
        // 注销
        function logout() {
            layer.open({
                title: "注销",
                content: "是否退出当前用户？", //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                btn: ['注销', '取消']
                , yes: function (index, layero) {
                    axios({
                        method: 'post',
                        url: '/logout'
                    }).then(function (response) {
                        // axios工具下，服务器真正返回的数据在返回对象的data中
                        let res = response.data;
                        if (res.code === 200) {
                            window.location.href = '/login';
                        }
                    })
                }
                , btn2: function (index, layero) {
                    //按钮【按钮二】的回调

                    // return false //开启该代码可禁止点击该按钮关闭
                }
            })
        }

        layui.use(["form", "layer"], function () {
            var form = layui.form;
            var layer = layui.layer;

            form.on('submit', function (data) {
                var id = Number(location.search.substring(4));
                axios({
                    method: "post",
                    url: "/countSubmit",
                    data: {
                        subForm: data.field,
                        id: id
                    }
                }).then(function (res) {
                    res = res.data;
                    let code = res.code;
                    if (code === 200) {
                        // window.location.href="/countShow?id="+id;
                        window.location.href = "/addSubmitOk?id=" + id;

                    } else {
                        console.log("提交失败");
                    }
                })

                return false;
            });
        })

        // 添加选项
        function addOptions(id, type) {
            layui.use(['form', 'layer'], function () {
                var form = layui.form, layer = layui.layer;
                // 按钮弹出框
                layer.prompt({
                    formType: 0,
                    value: '',
                    title: '请输入分值',
                    // area: ['800px', '350px'] //自定义文本域宽高
                }, function (value, index, elem) {
                    if (!isNaN(value)) {
                        axios({
                            method: "post",
                            url: "/addOptions",
                            data: {
                                value: value,
                                id: id,
                                type: type
                            }
                        }).then(function (res) {
                            res = res.data;
                            let data = JSON.parse(res.data)
                            let opstype = Number(data.optionType);
                            if (opstype === 1) {
                                let html = `
                                <input type="text" name="ops${data.id}" required lay-verify="required" placeholder="分值"
                                    autocomplete="off" value="${data.optionContent}" class="layui-input">
                                `
                                $("#form" + data.fromQuestionId).append(html);

                                $('#ado' + data.fromQuestionId).remove();
                                form.render();
                            } else if (opstype === 2) {
                                $("#sco" + data.fromQuestionId).attr(`name`, `ops${data.id}`);

                                for (i = 0; i <= value; i++) {
                                    if (i < value) {

                                        html = `
                                            <option value="${i}" disabled>${i}分</option>
                                        `
                                        $("#sco" + data.fromQuestionId).append(html);
                                    } else if (i = value) {
                                        html = `
                                            <option value="${i}">${i}分</option>
                                        `
                                        $("#sco" + data.fromQuestionId).append(html);
                                        $('#ado' + data.fromQuestionId).remove();
                                    }

                                }

                                form.render();
                            }
                            else {
                                console.log("添加选项失败");
                            }

                        })
                        layer.close(index);
                    } else {
                        layer.msg('只能输入数字类型', function () {
                            // 提示后操作
                        });
                    }
                });
                form.render();//关键代码
            });
        }
        // 添加填分题目
        function addWrite() {
            var id = Number(location.search.substring(4));
            axios({
                method: "post",
                url: "/addScoreProblems",
                data: {
                    id: id
                }
            }).then(function (res) {
                res = res.data;
                let data = JSON.parse(res.data);

                let html = `
                <div class="layui-form-item">
                    <label class="layui-form-label">填分题：</label>
                    <div class="layui-input-block" id="form${data.id}">
                        <input type="text" name="adq${data.id}" required lay-verify="required" placeholder="请输入问题"
                            autocomplete="off" class="layui-input">
                    </div>
                    <label class="layui-form-label"></label>
                    <button type="button" id="ado${data.id}" class="layui-btn layui-btn-primary layui-border-green "
                        onclick="addOptions(${data.id},${data.countType})" style="margin-top:0.5rem"><img src="../imgs/添加.png"
                            style="width: 1rem;height: 1rem;margin-bottom: 0.1rem;"> 设置分值</button>
                </div>
                `
                $("#problem").append(html);
                $("#submitForm").removeClass("layui-hide");
                layui.use(['form', 'layer'], function () {
                    var form = layui.form, layer = layui.layer;
                    form.render();//关键代码
                });
            })
        }


        // 添加选分题目
        function addScore() {
            var id = Number(location.search.substring(4));
            axios({
                method: "post",
                url: "/addSelectScore",
                data: {
                    id: id
                }
            }).then(function (res) {
                res = res.data;
                let data = JSON.parse(res.data);

                let html = `
                <div class="layui-form-item">
                    <label class="layui-form-label">选分题：</label>
                    <div class="layui-input-block" id="form${data.id}">
                        <input type="text" name="adq${data.id}" required lay-verify="required" placeholder="请输入问题"
                            autocomplete="off" class="layui-input">
                        <select name="ops${data.id}" lay-verify="required" id="sco${data.id}">

                        </select>
                    </div>
                    <label class="layui-form-label"></label>
                    <button type="button" id="ado${data.id}" class="layui-btn layui-btn-primary layui-border-green "
                        onclick="addOptions(${data.id},${data.countType})" style="margin-top:0.5rem"><img src="../imgs/添加.png"
                            style="width: 1rem;height: 1rem;margin-bottom: 0.1rem;"> 设置分值</button>
                </div>
                `
                $("#problem").append(html);
                $("#submitForm").removeClass("layui-hide");
                layui.use(['form', 'layer'], function () {
                    var form = layui.form, layer = layui.layer;
                    form.render();//关键代码
                });
            })
        }
    </script>
</body>

</html>